<script setup>
	import {ref, nextTick,watch} from 'vue'

	const props = defineProps({
		dataList:{
			type:Array,
			default:() => []
		}
	})
	const emit = defineEmits(['change'])

	const activeGroupId = ref(null)
	const scrollToMenuId = ref('')
	watch(activeGroupId,async (value) => {
		await nextTick()
		scrollToMenuId.value = value
	})
	// todo:在商品列表中完成了该功能，但是好像不符合代码分离的原则
	// watch(props.dataList,(v) => {
	// 	console.log(v,'first')
	// 	// setActiveMenu(v.value[0].id)
	// })

	function handleClick(id){
		setActiveMenu(id)
		change()
	}
	function setActiveMenu(id){
		activeGroupId.value = id
	}
	function change(){
		emit('change',activeGroupId.value)
	}

	defineExpose({setActiveMenu})
</script>
<template>
  <view class="menu">
			<scroll-view 
				class="menu-scroller" 
				:scroll-into-view="scrollToMenuId"
				scroll-y 
				:show-scrollbar="false" 
				:scroll-with-animation="true"
			>
				<view 
					v-for="item in props.dataList" 
					:class="['menu-item',activeGroupId === item.id ? 'menu-item-active' : '']"  
					:id="item.id" 
					@click="handleClick(item.id)"
				>
					<view v-if="activeGroupId === item.id" class="active-bar"></view>
					<!-- item.msg -->
					<view v-show="activeGroupId != item.id && item.msg" class="menu-msg">{{item.msg}}</view>
					<view class="content">
						<uni-icons v-if="activeGroupId === item.id" type="vip-filled" size="50rpx"></uni-icons>
						<text class="menu-label">{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
</template>
<style lang="less" scoped>
		.menu {
			width:150rpx;
			background-color: #F6F6F6;
			.menu-scroller {
				height:59vh;
				z-index:500;
			}
			
			.menu-item-active {
				background-image: linear-gradient(to right, #E7E7E7 , #F6F6F6);
			}
			.menu-item {
				display:flex;
				justify-content: center;
				align-items: flex-end;
				position:relative;
				min-height:60rpx;
				padding-bottom:10rpx;
				.active-bar {
					@barWidth:9rpx;
					height:80%;
					width:@barWidth;
					border-top-right-radius:@barWidth;
					border-bottom-right-radius:@barWidth;
					background-color: #002BBE;
					position:absolute;
					left:0;
					top:50%;
					transform: translateY(-50%);
				}
				.menu-msg {
					@borderRadius:15rpx;
					font-size:20rpx;
					width:80rpx;
					background-color: #C1A379;
					padding:3rpx 0;
					display:flex;
					justify-content: center;
					align-items: center;
					border-top-left-radius:@borderRadius;
					border-top-right-radius:@borderRadius;
					border-bottom-right-radius:@borderRadius;
					position:absolute;
					right:10rpx;
					top:0;
				}
				.content {
					display:flex;
					flex-direction: column;
				}
			}
		}
</style>